import React, { Component } from 'react'
import './index.css';
import Header from '../Header';
import Main from '../Main';
import Footer from '../Footer';
import { nanoid } from 'nanoid'
export default class Todo extends Component {
    //设置数据状态
    state = {
        todos: [
            {id: 1, title: '骑电动车', done: true},
            {id: 2, title: '请客吃饭', done: true},
            {id: 3, title: '参加孩子满月席', done: false}
        ]
    }
    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}  />
                    <Main todos={this.state.todos}  
                            checkTodo={this.checkTodo}
                            removeTodo={this.removeTodo}
                        />
                    <Footer todos={this.state.todos} 
                            checkAllTodo={this.checkAllTodo}
                            removeDoneTodos={this.removeDoneTodos}
                     />
                </div>
            </div>
        )
    }

    //新增任务  是一个独立的方法  title 任务的名称
    addTodo = (title) => { 
        this.setState({
            todos: [
                ...this.state.todos,
                {id: nanoid(), title: title, done: false}
            ]
        })
    }

    //修改某个任务的完成状态
    checkTodo = (id, status) => {
        //修改指定元素的状态
        // this.state.todos.forEach((item, index) => {
        //     if(item.id === id){
        //         item.done = status;
        //     }
        // });

        // this.setState({})

        let todos = this.state.todos.map(item => {
            //判断
            if(item.id === id) {
                item.done = status
            }
            return item;
        })

        //修改 state 
        this.setState({
            todos: todos
        })
    }

    //删除某个任务
    removeTodo = (id) => {
        //splice
        //过滤
        let newTodo = this.state.todos.filter(item => {
            if(item.id !== id) return true;
            return false;
        });

        this.setState({
            todos: newTodo
        })
    }

    //改变所有任务的状态  status true or false
    checkAllTodo = (status) => {
        //修改所有任务的状态
        let newTodos = this.state.todos.map(item => {
            item.done = status;
            return item;
        });
        //设置
        this.setState({
            todos: newTodos
        })
    }

    //清除已经完成的任务
    removeDoneTodos = () => {
        let newTodos = this.state.todos.filter(item => item.done === false);
        this.setState({
            todos: newTodos
        })
    }

    //测试
    componentDidMount(){
        // 测试 addTodo
        // this.addTodo('买衣服');
        //测试 checkTodo
        // this.checkTodo(1, true);
        // this.checkTodo(2, false);
        //测试删除任务
        // this.removeTodo(1);
        //测试所有任务的状态修改
        // this.checkAllTodo(false);
        //测试清除已完成
        // this.removeDoneTodos();
    }

}
